<template>
  <div class="test-page">
    <div class="test-header">
      <h1>🔧 登录跳转测试</h1>
      <p>测试用户登录跳转到前端，管理员登录跳转到后端</p>
    </div>

    <div class="test-content">
      <!-- 用户登录测试 -->
      <div class="test-section">
        <h2>👤 用户登录测试</h2>
        <div class="test-form">
          <el-input
            v-model="userForm.email"
            placeholder="用户邮箱"
            style="margin-bottom: 10px"
          />
          <el-input
            v-model="userForm.password"
            type="password"
            placeholder="用户密码"
            style="margin-bottom: 10px"
          />
          <el-button @click="testUserLogin" type="primary" :loading="userLoading">
            测试用户登录
          </el-button>
        </div>
        <div class="test-result" v-if="userResult">
          <h4>结果:</h4>
          <pre>{{ userResult }}</pre>
        </div>
      </div>

      <!-- 管理员登录测试 -->
      <div class="test-section">
        <h2>👨‍💼 管理员登录测试</h2>
        <div class="test-form">
          <el-input
            v-model="adminForm.username"
            placeholder="管理员用户名/邮箱"
            style="margin-bottom: 10px"
          />
          <el-input
            v-model="adminForm.password"
            type="password"
            placeholder="管理员密码"
            style="margin-bottom: 10px"
          />
          <el-button @click="testAdminLogin" type="warning" :loading="adminLoading">
            测试管理员登录
          </el-button>
        </div>
        <div class="test-result" v-if="adminResult">
          <h4>结果:</h4>
          <pre>{{ adminResult }}</pre>
        </div>
      </div>

      <!-- 当前状态 -->
      <div class="test-section">
        <h2>📊 当前状态</h2>
        <div class="status-info">
          <div class="status-item">
            <strong>用户Token:</strong> {{ userToken || '无' }}
          </div>
          <div class="status-item">
            <strong>管理员Token:</strong> {{ adminToken || '无' }}
          </div>
          <div class="status-item">
            <strong>用户类型:</strong> {{ userType || '无' }}
          </div>
          <div class="status-item">
            <strong>当前用户:</strong> {{ currentUser || '无' }}
          </div>
        </div>
        <el-button @click="clearAll" type="danger" style="margin-top: 10px">
          清除所有认证信息
        </el-button>
      </div>

      <!-- 快速操作 -->
      <div class="test-section">
        <h2>⚡ 快速操作</h2>
        <div class="quick-actions">
          <el-button @click="goToLogin" type="primary">跳转到登录页</el-button>
          <el-button @click="goToHome" type="success">跳转到首页</el-button>
          <el-button @click="goToAdminDashboard" type="warning">跳转到管理后台</el-button>
          <el-button @click="refreshPage" type="info">刷新页面</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElInput, ElButton } from 'element-plus'
import api from '@/utils/axios'
import authUtils from '@/utils/auth'

const router = useRouter()

// 响应式数据
const userForm = ref({
  email: 'test@example.com',
  password: 'password'
})

const adminForm = ref({
  username: 'admin@example.com',
  password: 'admin123'
})

const userLoading = ref(false)
const adminLoading = ref(false)
const userResult = ref('')
const adminResult = ref('')

// 计算属性
const userToken = computed(() => localStorage.getItem('token'))
const adminToken = computed(() => localStorage.getItem('adminToken'))
const userType = computed(() => localStorage.getItem('userType'))
const currentUser = computed(() => {
  const user = localStorage.getItem('user')
  const adminUser = localStorage.getItem('adminUser')
  return user ? JSON.parse(user).name : (adminUser ? JSON.parse(adminUser).name : null)
})

// 测试用户登录
const testUserLogin = async () => {
  userLoading.value = true
  userResult.value = ''
  
  try {
    const response = await api.post('/login', {
      email: userForm.value.email,
      password: userForm.value.password
    })
    
    if (response.success) {
      authUtils.setUserAuth(response.data.token, response.data.user)
      userResult.value = `✅ 用户登录成功！\nToken: ${response.data.token}\n用户: ${response.data.user.name}\n\n应该跳转到前端首页...`
      
      // 延迟跳转，让用户看到结果
      setTimeout(() => {
        router.push('/home')
      }, 2000)
    } else {
      userResult.value = `❌ 用户登录失败: ${response.message}`
    }
  } catch (error) {
    userResult.value = `❌ 用户登录错误: ${error.message}`
  } finally {
    userLoading.value = false
  }
}

// 测试管理员登录
const testAdminLogin = async () => {
  adminLoading.value = true
  adminResult.value = ''
  
  try {
    const response = await api.post('/admin/login', {
      username: adminForm.value.username,
      password: adminForm.value.password
    })
    
    if (response.success) {
      authUtils.setAdminAuth(response.data.token, response.data.user)
      adminResult.value = `✅ 管理员登录成功！\nToken: ${response.data.token}\n管理员: ${response.data.user.name}\n\n应该跳转到后端管理后台...`
      
      // 延迟跳转，让用户看到结果
      setTimeout(() => {
        window.location.href = 'http://127.0.0.1:8000/admin/dashboard'
      }, 2000)
    } else {
      adminResult.value = `❌ 管理员登录失败: ${response.message}`
    }
  } catch (error) {
    adminResult.value = `❌ 管理员登录错误: ${error.message}`
  } finally {
    adminLoading.value = false
  }
}

// 清除所有认证信息
const clearAll = () => {
  authUtils.clearAuth()
  userResult.value = ''
  adminResult.value = ''
}

// 快速操作
const goToLogin = () => {
  router.push('/login')
}

const goToHome = () => {
  router.push('/home')
}

const goToAdminDashboard = () => {
  window.location.href = 'http://127.0.0.1:8000/admin/dashboard'
}

const refreshPage = () => {
  window.location.reload()
}

onMounted(() => {
  console.log('登录跳转测试页面已加载')
})
</script>

<style scoped>
.test-page {
  min-height: 100vh;
  background: #f8fafc;
  padding: 20px;
}

.test-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.test-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.test-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.test-content {
  max-width: 1000px;
  margin: 0 auto;
}

.test-section {
  background: white;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.test-section h2 {
  color: #1f2937;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #667eea;
}

.test-form {
  margin-bottom: 20px;
}

.test-result {
  background: #f9fafb;
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #667eea;
}

.test-result h4 {
  color: #374151;
  margin-bottom: 10px;
}

.test-result pre {
  background: #1f2937;
  color: #f9fafb;
  padding: 15px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  overflow-x: auto;
  white-space: pre-wrap;
}

.status-info {
  background: #f9fafb;
  border-radius: 10px;
  padding: 20px;
}

.status-item {
  margin: 10px 0;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border-left: 4px solid #667eea;
}

.status-item strong {
  color: #374151;
  margin-right: 10px;
}

.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .test-header h1 {
    font-size: 2rem;
  }
  
  .quick-actions {
    flex-direction: column;
  }
}
</style>
